<template>
  <div>
    <van-nav-bar :border="false">
      <template #left>
        <van-icon
          name="arrow-left"
          size="30"
          color="#444"
          @click="back"
          class="back"
        />
      </template>
      <template #title>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          autofocus
          :shape="'round'"
          @search="onSearch"
        />
      </template>
      <template #right>
        <van-button round type="info" @click="onSearch">搜索</van-button>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Icon, Popover, ShareSheet, Search, Button ,Toast } from "vant";


Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Search);
Vue.use(Button);
Vue.use(Toast);

Vue.use(Popover).use(ShareSheet);

export default {
  name: "NavBra",

  data() {
    return {
      value:this.$route.params.keyword,
      showPopover: false,
    };
  },

  mounted() {},

  methods: {
    // jumpTo() {
    //   this.$router.push("/Search");
    // },
    back() {
      this.$router.push("/home");
    },
    onSearch() {
      if (this.value.trim() == "") {
        Toast.fail("输入为空");
        return
      }
      
      this.$router.push("/Searchlist/"+this.value)
    },
  },
 
};
</script>

<style  scoped>
div {
  position: sticky;
  top: 0;
  z-index: 99;

}
/* .van-nav-bar {
  background:#fff;
  position:sticky;
  left: 0;
  right: 0;
  top: 0;
} */
.back {
  width: 0.35rem;
  height: 0.35rem;
  text-align: center;
  line-height: 0.35rem;
}
::v-deep .van-nav-bar__title {
  font-size: 20px;
  font-weight: 500;
}

.van-search {
  padding: 0;
  width: 2rem;
}
::v-deep .van-nav-bar .van-icon {
  color: #ccc;
  font-size: 0.2rem;
}

.van-button {
  height: 0.27rem;
  background-color: #e93b3d;
  border: none;
}
</style>